<script setup lang="ts">
type Prop = {
  title?: string;
  titleAffix?: boolean;
  border?: boolean;
  fill?: boolean;
  rowClass?: string;
};

withDefaults(defineProps<Prop>(), { border: true });
</script>

<template>
  <div :class="['description', fill ? 'w-full' : '']">
    <slot name="title">
      <div v-if="title" class="description-title">{{ title }}</div>
    </slot>
    <div
      :class="[
        'description-wrapper',
        !border ? 'description-wrapper-noborder' : 'description-wrapper-border',
        rowClass
      ]"
    >
      <slot />
    </div>
  </div>
</template>
<style lang="scss">
.description {
  display: flex;
  flex-direction: column;
  :deep(.el-table) {
    border-radius: 8px;
  }
  box-sizing: border-box;
}
.description-title {
  font: bold;
  font-weight: 500;
  padding: 15px 5px;
  font-size: var(--el-font-size-medium);
  box-sizing: border-box;
}

.description-wrapper {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
}

.description-wrapper-noborder {
  border: none !important;

  .description-row {
    border-bottom: none !important;
  }
}
.description-wrapper-border {
  // border: 1px solid var(--el-border-color);
  // background-color: var(--el-bg-color-page);
  background-color: var(--el-border-color);

  :last-child {
    border-bottom: none !important;
  }
}
</style>
